<template>
  <a-drawer
    title="电子合同设置"
    :visible="visible"
    :destroyOnClose="true"
    :width="800"
    :body-style="{
      height: 'calc(100% - 55px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    @close="handleClose"
  >
    <!-- 表格 -->
    <a-table
      :columns="columns"
      :data-source="dataList"
      row-key="id"
      :loading="loading"
      :pagination="false"
      :scroll="{ x: 'max-content' }"
    >
      <template #title>
        <a-row type="flex" justify="end" align="middle">
          <a-button
            type="primary"
            @click.stop="handleAdd"
          >+添加公司电子章</a-button>
        </a-row>
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'send_method'">
          <span v-if="record.is_sms !== 1 && record.is_email !== 1 && record.is_weixin !== 1">--</span>
          <a-tag v-if="record.is_sms == 1">短信</a-tag>
          <a-tag v-if="record.is_email == 1">邮件</a-tag>
          <a-tag v-if="record.is_weixin == 1">公众号</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            type="link"
            @click="handleEdit(record)"
          >编辑</a-button
          >
          <a-button
            type="link"
            danger
            v-if="record.is_org !== 1"
            @click="handleDelete(text)"
          >删除</a-button
          >
        </template>
      </template>
    </a-table>

    <!--  添加/编辑  -->
    <ElContractSettingAdd
      :visible="editVisible"
      :id="editId"
      @handleSuccess="handleAddSuccess"
      @handleCancel="handleAddCancel"
    />
  </a-drawer>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onActivated,
  reactive,
  toRefs, createVNode,
} from "vue";
import request from "@/common/utils/request";
import { useRouter, useRoute } from "vue-router";
import ElContractSettingAdd from "@/components/contract/CustomFilter/modules/ElContractSettingAdd.vue";
import {message, Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import store from "@/store";
export default defineComponent({
  name: "ElContractSetting",
  components: {
    ElContractSettingAdd,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const $router = useRouter();

    const state = reactive({
      loading: false,
      dataList: [],
      editVisible: false,
      editId: undefined,
    });

    const getSettingList = () => {
      state.loading = true;
      request
        .get("/org", "/esign/getEsignConfigList")
        .then((res) => {
          state.dataList = res?.list || [];
        }).finally(() => {
        state.loading = false;
      });
    };

    const handleAdd = () => {
      state.editVisible = true;
    };

    const handleEdit = (record) => {
      state.editId = record.id;
      state.editVisible = true;
    };

    const handleDelete = (id) => {
      Modal.confirm({
        title: () => `确定要删除该公司配置信息吗？`,
        icon: () => createVNode(ExclamationCircleOutlined),
        centered: true,
        onOk() {
          request.del("/org", '/esign/del', {id}).then((res) => {
            message.success(res?.msg || '删除成功');
            getSettingList();
          })
        },
      });

    };

    const handleAddCancel = () => {
      state.editId = undefined;
      state.editVisible = false;
    };

    const handleAddSuccess = () => {
      handleAddCancel();
      getSettingList();
    };

    const handleClose = () => {
      emit('handleCancel');
    };

    const reset = () => {
      state.loading = false;
      state.dataList = [];
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getSettingList();
        } else {
          reset();
        }
      }
    );

    return {
      ...toRefs(state),
      columns,
      handleClose,
      handleAdd,
      handleEdit,
      handleDelete,
      handleAddCancel,
      handleAddSuccess,
    };
  },
});

const columns = [
  {
    title: "公司名称",
    dataIndex: "company_name",
    key: "company_name",
    width: "20%",
  },
  {
    title: "签约方式",
    dataIndex: "type",
    key: "type",
    width: "20%",
    customRender: ({ text}) => {
      return text || "--";
    },
  },
  {
    title: "发送方式",
    dataIndex: "send_method",
    key: "send_method",
    width: "40%",
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
    width: "20%",
  },
]
</script>

<style lang="less" scoped>

</style>
